<template>
  <div class="bs-page-main">
    <div class="user-home">
      <div class="main-box">
        <div v-show="!hideNav" class="sub-nav">
          <ul>
            <li>
              <router-link to="/user/detail" active-class="cur"
                ><i class="detail"></i>Account Details</router-link
              >
            </li>
            <li>
              <router-link to="/user/address" active-class="cur"
                ><i class="addr"></i>Delivery Addresses</router-link
              >
            </li>
            <li>
              <router-link to="/user/order" active-class="cur"
                ><i class="order"></i>Order History</router-link
              >
            </li>
            <li>
              <router-link to="/user/profile" active-class="cur"
                ><i class="profile"></i>Profile</router-link
              >
            </li>
          </ul>
        </div>
        <div :class="editFlag ? 'user-main edit-cur' : 'user-main'">
          <div :class="editFlag ? 'u-tit cur' : 'u-tit'">
            <div><span>Edit</span>Profile</div>
            <a href="javascript:" class="cls" @click="editFlag = false"></a>
          </div>
          <div :class="editFlag ? 'user-info edit-cur' : 'user-info'">
            <div
              class="avatar"
              @click="
                editFlag ? (avatarEditFlag = true) : (avatarEditFlag = false)
              "
            >
              <img src="/data/pic/avatar.jpg" alt="" />
            </div>
            <div class="info">
              <div class="name">John Smith</div>
              <a href="javascript:" class="edit" @click="editFlag = true"></a>
            </div>
          </div>
          <template v-if="editFlag">
            <div
              class="upload-avatar-musk"
              v-if="editFlag && avatarEditFlag"
            ></div>
            <div v-if="editFlag && avatarEditFlag" class="upload-avatar">
              <input
                accept="image/*"
                type="file"
                id="file"
                @change.stop="handleFile"
              />
              <a
                href="javascript:"
                class="close"
                @click="avatarEditFlag = false"
              ></a>
              <div class="u-t">Edit Profile Picture</div>
              <a href="javascript:" class="upload-btn" @click="handleAvatar"
                >Upload Photos</a
              >
              <a href="javascript:" v-if="avatarFile" class="upload-btn"
                >Save</a
              >
              <div class="tips">
                Image must be in jpg file format.File size must be less than
                2MB.
              </div>
              <div
                v-if="avatarFile"
                class="pic-edit"
                @touchstart="touchStart($event)"
                @touchmove="touchMove($event)"
                @mousedown="touchStart($event, 1)"
              >
                <canvas width="500" height="500" id="canvas"></canvas>
                <div class="bg"></div>
                <div class="bd"></div>
              </div>
              <div v-else class="pic-show">
                <img src="/data/pic/avatar.jpg" alt="" />
              </div>
              <a href="javascript:" class="btn">Upload Photos</a>
              <a href="javascript:" class="btn">Save</a>
            </div>
            <div class="edit-ipt">
              <div class="ipt-box">
                <div class="lb">First Name</div>
                <div class="ipt">
                  <input type="text" />
                </div>
              </div>
              <div class="ipt-box">
                <div class="lb">Last Name</div>
                <div class="ipt">
                  <input type="text" />
                </div>
              </div>
              <div class="blank-div"></div>
              <div class="btn">
                <a href="javascript:" class="save">Save</a>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const isMobile = document.documentElement.clientWidth < 800;
export default {
  data() {
    return {
      editFlag: false,
      avatarEditFlag: true,
      isMobile,
      avatarFile: null,
      canvasCtx: null,
      picWidth: 0,
      picHeight: 0,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      picPosX: 0,
      picPosY: 0,
      curPic: null,
      mouseDrag: false,
    };
  },
  computed: {
    hideNav() {
      return isMobile && this.editFlag;
    },
  },
  methods: {
    handleAvatar() {
      document.querySelector("#file").click();
    },
    handleFile(e) {
      let $target = e.target;
      let file = $target.files[0];
      if (parseInt(file.size) > 5120000) {
        alert("图片大小不能超过5M");
        return;
      }
      const reader = new FileReader();
      reader.onloadend = () => {
        this.avatarFile = reader.result;
        this.$nextTick(() => {
          this.drawCanvas();
        });
      };
      reader.readAsDataURL(file);
    },
    drawCanvas() {
      const c = document.getElementById("canvas");
      this.canvasCtx = c.getContext("2d");
      this.canvasCtx.clearRect(0, 0, 500, 500);
      this.curPic = new Image();
      this.curPic.crossOrigin = "anonymous";
      this.curPic.src = this.avatarFile;
      this.curPic.onload = () => {
        this.picWidth = this.curPic.width;
        this.picHeight = this.curPic.height;
        if (this.curPic.height > this.curPic.width) {
          this.canvasCtx.drawImage(
            this.curPic,
            0,
            0,
            600,
            600 * (this.curPic.height / this.curPic.width)
          );
        } else {
          this.canvasCtx.drawImage(
            this.curPic,
            0,
            0,
            600 * (this.curPic.width / this.curPic.height),
            600
          );
        }
        this.picPosX = 0;
        this.picPosY = 0;
      };
    },
    touchStart(e, flag) {
      if (flag === 1) {
        this.mouseDrag = true;
        this.startX = e.clientX - this.picPosX;
        this.startY = e.clientY - this.picPosY;
        document.body.addEventListener("mousemove", this.mouseEvent);
        document.body.addEventListener("mouseup", this.touchEnd);
      } else {
        e.preventDefault();
        this.startX = e.targetTouches[0].pageX - this.picPosX;
        this.startY = e.targetTouches[0].pageY - this.picPosY;
      }
    },
    mouseEvent(e) {
      this.touchMove(e, 1);
    },
    touchEnd() {
      document.body.removeEventListener("mousemove", this.mouseEvent);
      document.body.removeEventListener("mouseup", this.touchEnd);
      this.mouseDrag = false;
    },
    touchMove(e, flag) {
      if (flag === 1 && !this.mouseDrag) {
        return;
      }
      this.endX = flag === 1 ? e.clientX : e.targetTouches[0].pageX;
      this.endY = flag === 1 ? e.clientY : e.targetTouches[0].pageY;
      const w = this.endX - this.startX;
      const h = this.endY - this.startY;
      this.canvasCtx.clearRect(0, 0, 500, 500);
      if (this.curPic.height > this.curPic.width) {
        const delta = 600 * (this.curPic.height / this.curPic.width) - 500;
        this.picPosX = w > 0 ? 0 : w < -100 ? -100 : w;
        this.picPosY = h > 0 ? 0 : h < -delta ? -delta : h;
        this.canvasCtx.drawImage(
          this.curPic,
          this.picPosX,
          this.picPosY,
          600,
          600 * (this.curPic.height / this.curPic.width)
        );
      } else {
        const delta = 600 * (this.curPic.width / this.curPic.height) - 500;
        this.picPosX = w > 0 ? 0 : w < -delta ? -delta : w;
        this.picPosY = h > 0 ? 0 : h < -100 ? -100 : h;
        this.canvasCtx.drawImage(
          this.curPic,
          this.picPosX,
          this.picPosY,
          600 * (this.curPic.width / this.curPic.height),
          600
        );
      }
    },
  },
};
</script>
